import { _decorator, Button, Tween, tween, UITransform, Widget } from 'cc';
import { BaseUI } from '../../../../frame/component/ui.base';
import GameDC from '../../../data/data.game.center';
import { Popup } from '../pop-up';
const { ccclass, property } = _decorator;

@ccclass('UIHomeRight')
export class UIHomeRight extends BaseUI {
	private uitrans: UITransform;
	private vecasit: mtec.cc.VecAssist;

	private ui_status: 'enter' | 'leave';
	private interval = 60;
	private stop = false;
	private choice_box: Array<'adblock'|'gift'> = [];

	private get next_choice(){
		return mtec.array.random(this.choice_box);
	}

	protected initAfterOnLoad(){
		this.init();
	}

	protected start(){
		this.adaptUI();
		this.node.active = false;
	}

	private init(){
		this.uitrans = this.node.getComponent(UITransform);
		this.vecasit = new mtec.cc.VecAssist(this.node);
	}

	private adaptUI(){
		this.vecasit.getPosition('over_right', 'center');
		this.node.setPosition(this.vecasit.vec);

		let wgt = this.node.getComponent(Widget);
		if(!wgt){
			wgt = this.node.addComponent(Widget);
			[wgt.isAlignTop, wgt.isAlignBottom, wgt.isAlignLeft, wgt.isAlignRight] = [true, true, false, false];
			[wgt.isAbsoluteTop, wgt.isAbsoluteBottom, wgt.isAbsoluteLeft, wgt.isAbsoluteRight] = [true, true, false, false];
			wgt.top = 0; wgt.bottom = 0;
		}
		wgt.updateAlignment();

		['adblock', 'gift'].forEach(name=>{
			let node = this.node.getChildByName(name);
			let va = new mtec.cc.VecAssist(node);
			va.vec.y = va.bottom + 570;
			node.setPosition(va.vec);
		});
	}

	protected _click_event_: { [name: string]: (this: UIHomeRight, button: Button) => void; } = {
		adblock(btn){
			btn.interactable = false;
			this.stop = true;
			Popup.GiftBlocker()
			.then(()=>{
				btn.interactable = GameDC.User.adblock;
				this.stop = false;
				this.next();
			});
		},
		gift(btn){
			btn.interactable = false;
			this.stop = true;
			Popup.GiftBlocker()
			.then(()=>{
				btn.interactable = GameDC.User.gift;
				this.stop = false;
				this.next();
			});
		}
	}

	protected listening(){
		let list = [
			this.follow(GameDC.Trigger, 'UIHome', (o, v)=>this.onUIHomeTrigger(o, v), false),
			this.follow(GameDC.User, 'adblock', (_, show)=>this.onChoiceChange('adblock', show)),
			this.follow(GameDC.User, 'gift', (_, show)=>this.onChoiceChange('gift', show))
		];
		return list;
	}

	private onUIHomeTrigger(ov: boolean, show: boolean){
		if(show){
			this.enter();
		}else{
			this.leave();
		}
	}

	private onChoiceChange(type: 'adblock'|'gift', show: boolean){
		if(show){
			this.choice_box.push(type);
		}else{
			mtec.array.remove(this.choice_box, type);
		}

		if(this.choice_box.length<=0 && this.ui_status=='enter'){
			this.moveOut();
			this.node.destroy();
		}
	}

	private enter(){
		if(this.ui_status=='enter'){
			return void 0;
		}
		this.ui_status = 'enter';

		this.node.active = true;

		let choice = this.next_choice;

		this.node.children.forEach(n=>n.active = n.name===choice);

		this.moveIn(()=>mtec.delay(this.interval, ()=>this.next()));
	}

	private leave(){
		if(this.ui_status=='leave'){
			return void 0;
		}
		this.ui_status = 'leave';

		this.moveOut(()=>this.node.active = false);
	}

	private next(){
		if(this.ui_status!=='enter' || this.stop){
			return void 0;
		}

		this.moveOut(()=>{
			let choice = this.next_choice;
			this.node.children.forEach(n=>n.active = n.name===choice);
			this.moveIn(()=>mtec.delay(this.interval, ()=>this.next()));
		});
	}

	private moveIn(call?: Function){
		this.vecasit.getPosition('right', 'center');

		Tween.stopAllByTarget(this.node);

		let tw = tween(this.node).to(0.5, {position: this.vecasit.vec}, {easing: 'cubicOut'});
		if(call){
			tw = tw.call(()=>call());
		}
		tw.start();
	}

	private moveOut(call?: Function){
		this.vecasit.getPosition('over_right', 'center');

		Tween.stopAllByTarget(this.node);

		let tw = tween(this.node).to(0.5, {position: this.vecasit.vec}, {easing: 'cubicOut'});
		if(call){
			tw = tw.call(()=>call());
		}
		tw.start();
	}
}

